<!-- eslint-disable vue/no-mutating-props -->
<template>
  <li>
    <label>
      <input type="checkbox" v-model="todo.done" />
      <!-- 根据是否修改，展示文字或输入框 -->
      <span v-show="!todo.isEdit">{{ todo.title }}</span>
      <!-- 这里修改值可直接用v-model实现，但是用方法实现加深记忆 -->
      <input
        type="text"
        :value="todo.title"
        v-show="todo.isEdit"
        @blur="blurHandler(todo, $event)"
        ref="inputTitle"
      />
    </label>
    <!-- 样式浮动问题，实际编辑按钮在左边 -->
    <button class="btn btn-danger" @click="delBehavior(todo.id)">删除</button>
    <button
      class="btn btn-edit"
      v-show="!todo.isEdit"
      @click="updBehavior(todo)"
    >
      编辑
    </button>
  </li>
</template>

<script>
import PubSub from "pubsub-js";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Behavior",
  props: ["todo"],
  methods: {
    handlerCheck(id) {
      //获取全局总线中的事件
      this.$bus.$emit("checkTodo", id);
    },
    delBehavior(behaviorId) {
      if (confirm("确认删除吗？")) {
        //使用消息订阅模式实现，这里是发布消息（生产者）
        PubSub.publish("deleteTodo", behaviorId);
      }
    },
    //编辑，将对象传进来
    updBehavior(todo) {
      //注意：这样赋值不是响应式的不会生效（可以用于接口调用前赋值）
      //todo.isEdit = !todo.isEdit;

      //优化，只有第一次触发时在强制追加，后续都直接修改
      //这里就跳过了，报错没有hasOwnProperty方法
      this.$set(todo, "isEdit", true);

      //自动获取焦点focus，但有时机问题（Java的AOP）
      //实现方式1：定时器实现，即晚一点执行。但是正式环境接口调用的事件不确定
      //实现方式2：vc实例的nextTick（下一轮的意思）：nextTick指定的回调会在DOM更新结束后执行！！！
      this.$nextTick(function () {
        this.$refs.inputTitle.focus();
      });
    },
    //光标移开事件，修改isEdit的值，第二个参数接收数据
    blurHandler(todo, e) {
      //已经有属性了，直接修改即可，不再需要强制$set
      todo.isEdit = false;
      //通过全局事件修改数据（要修改的id和修改后的最新值）
      if (!e.target.value.trim()) {
        return alert("输入不能为空");
      }
      this.$bus.$emit("updateTodo", todo.id, e.target.value);
    },
  },
};
</script>

<style scoped>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}

/* 鼠标悬浮样式 */
li:hover {
  background-color: #ddd;
}

/* 悬浮时控制按钮展示 */
li:hover button {
  display: block;
}
</style>

